<!--
 * @Description: 订单管理
 * @Author: 阳婷
 * @Date: 2021-03-18 10:33:15
 * @LastEditTime: 2023-07-03 15:29:58
 * @LastEditors: 阳婷
-->
<template>
    <div class='box-index'>
        <div class='filter-container'>
            <el-select class="fliterMargin" filterable v-model="order_status" placeholder="订单状态" size="small" clearable
                @change="getData">
                <el-option v-for="item in orderStatus" :key="item.key" :label="item.value" :value="item.key">
                </el-option>
            </el-select>
            <el-date-picker class="fliterMargin" size="small" v-model="order_time" type="datetimerange"
                value-format="YYYY-MM-DD hh:mm:ss" :default-value="defaultTime" range-separator="至"
                start-placeholder="开始时间" end-placeholder="结束时间" @change="getData">
            </el-date-picker>
            <el-button type="primary" class="filterBtn" size="small" @click="getData">查询</el-button>
        </div>
        <div class="role-content">
            <table-header @click='Eventclick' :hideBtn="hideBtn">
                <!-- <div class="unsendOrder" v-show="undelivered_count">{{undelivered_count}}个未派送订单</div> -->
            </table-header>
        </div>
        <el-table border style="width: 100%" :data="tableData" @selection-change="handleSelectionChange" ref="tables"
            highlight-current-row @row-click="rowclick" :row-key="getRowKeys">
            <el-table-column type="selection" :reserve-selection=true></el-table-column>
            <el-table-column prop="order_no" label="订单编号"></el-table-column>
            <el-table-column prop="mealNumber" label="派送序号"></el-table-column>
            <el-table-column prop="price" label="金额">
                <template #default="scope">
                    {{scope.row.price}} 元
                </template>
            </el-table-column>
            <el-table-column prop="total_amount" label="商品总数" width="120px"></el-table-column>
            <el-table-column prop="created_at" label="订单时间"></el-table-column>
            <el-table-column prop="paid_at" label="支付时间"></el-table-column>
            <el-table-column prop="order_status_name" label="订单状态" width="120px">
                <template #default="scope">
                    <span v-if="scope.row.order_status==1" class="notPay">
                        {{scope.row.order_status_name}}
                    </span>
                    <span v-else-if="scope.row.order_status==2" class="sendingOrder">
                        {{scope.row.order_status_name}}
                    </span>
                    <span v-else-if="scope.row.order_status==5" class="waitSend">
                        {{scope.row.order_status_name}}
                    </span>
                    <span v-else>
                        {{scope.row.order_status_name}}
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="120">
                <template #default="scope">
                    <el-button type="text"
                        v-show="scope.row.order_status==1||scope.row.order_status==2||scope.row.order_status==5"
                        @click="closeOrder(scope.row)" size="small">关闭订单</el-button>
                </template>
            </el-table-column>
            <!-- <el-table-column prop="run_time" label="运行时长"></el-table-column> -->
            <!-- <el-table-column fixed="right" label="操作" width="90">
                <template #default="scope">
                    <el-button type="text" v-if="scope.row.order_status==1" @click="setStatus(scope.row,1)"
                        size="small">配送</el-button>
                    <el-button type="text" style="color:rgb(33,214,41)" v-if="scope.row.order_status==2" size="small"
                        @click="setStatus(scope.row,2)">完成</el-button>
                </template>
            </el-table-column> -->
        </el-table>
        <div class="pagination-container">
            <el-pagination background @current-change="handleCurrentChange" :page-size='perPage' :current-page="current"
                :total="pagetotal" layout="total, prev, pager, next, jumper">
            </el-pagination>
            <asides v-if="show" v-model:show="show" v-model:header="header" v-model:Icon='icon' v-model:width="width">
                <detail v-model:row-data="rowData"></detail>
                <!-- <side-info v-model:row-data="rowData" v-model:table-data="tableData" v-model:types="typeList"
                    v-model:customers="customerList">
                </side-info> -->
            </asides>
        </div>
    </div>
</template>
<script>
    import TableHeader from "./../../components/TableHeader/index.vue"
    import Asides from "@/components/Asides"
    import detail from './detail.vue'
    import { ElMessageBox } from "element-plus";
    import {
        parseTime
    } from "@/utils/index"

    export default {
        data() {
            return {
                hideBtn: {
                    Enable: false,
                    Disable: false,
                    delete: true
                },
                pagetotal: 5, //总条数
                page: 1, //当前页
                perPage: 15, //每页多少条
                current: 1,
                sort: '',
                keyword: '',
                tableData: [],
                chooseGroup: [],
                rowData: {},
                header: "",
                show: false,
                icon: "el-icon-menu",
                width: "760px",
                order_time: [],
                order_status: "",
                orderStatus: [{
                    key: 1,
                    value: "未支付"
                }, {
                    key: 2,
                    value: "派送中"
                }, {
                    key: 3,
                    value: "已完成"
                }, {
                    key: 4,
                    value: "已关闭"
                }, {
                    key: 5,
                    value: "已支付"
                }],
                timer: "",
                // undelivered_count: "",//未派送订单数量
                defaultTime: []
            }
        },
        components: {
            TableHeader,
            Asides,
            detail
        },
        mounted() {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            this.defaultTime = [start, end]
            this.order_time = [parseTime(start), parseTime(end)]
            this.getData()
            this.setOrderInterval()
        },
        methods: {
            getRowKeys(row) {
                return row.id
            },
            setOrderInterval() {
                this.timer = setInterval(() => {
                    this.getOrderCount()
                }, 10000);
            },
            //未派送订单和派送中订单无法完成可结束订单
            closeOrder(val) {
                this.$confirm("您确定要结束该订单?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        this.$ajax(
                            "post", "/api/orders/endOrder", val,
                            data => {
                                this.$message({
                                    type: "success",
                                    message: data.msg
                                });
                                this.getData()
                            });
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消"
                        })
                    })
            },
            //新订单提示
            getOrderCount() {
                // this.$ajax('get', '/order-count', {
                // }, (data) => {
                //     if (data.code == 200) {
                //         var local = localStorage.getItem("fd_undelivered_count")
                //         if (local >= 0 && (data.data.undelivered_count > local)) {
                //             this.getData()
                //             //语音播报
                //             var utterThis = new window.SpeechSynthesisUtterance()
                //             utterThis.text = "有新的订单，请及时查看"
                //             window.speechSynthesis.speak(utterThis);
                //             //弹框提示
                //             clearInterval(this.timer)
                //             this.timer = ""
                //             ElMessageBox.alert('有新的订单，请及时查看！', '提示', {
                //                 confirmButtonText: '确定',
                //                 callback: (action) => {
                //                     this.setOrderInterval()
                //                 },
                //             })
                //         } else if (local >= 0 && (data.data.undelivered_count < local)) {
                //             this.getData()
                //         }
                //     }
                // })
            },
            setStatus(row, type) {
                if (type == 1) {
                    this.$ajax('post', '/api/orders/delevery/' + row.id, {

                    }, (data) => {
                        if (data.code == 200) {
                            this.getData()
                        }
                        this.$message({
                            type: "success",
                            message: data.msg
                        });
                    })
                } else if (type == 2) {
                    this.$ajax('post', '/api/orders/finish/' + row.id, {

                    }, (data) => {
                        if (data.code == 200) {
                            this.getData()
                        }
                        this.$message({
                            type: "success",
                            message: data.msg
                        });
                    })
                }
            },
            getData(val) {
                this.show ? this.show = false : ""
                if (val == 1) {
                    this.chooseGroup = []
                    this.$refs.tables.clearSelection();
                    this.page = 1
                }
                this.$ajax('get', '/api/orders', {
                    page: this.page,
                    keyword: this.keyword,
                    perPage: this.perPage,
                    order_status: this.order_status,
                    starttime: this.order_time && this.order_time.length > 1 ? this.order_time[0] : "",
                    endtime: this.order_time && this.order_time.length > 1 ? this.order_time[1] : ""
                }, (data) => {
                    this.tableData = data.data.data
                    // this.undelivered_count = data.data.undelivered_count
                    // data.data.undelivered_count ? localStorage.setItem("fd_undelivered_count", this.undelivered_count) : localStorage.setItem("fd_undelivered_count", -1)
                    this.current = data.data.pageNum
                    this.perPage = parseFloat(data.data.pageSize)
                    this.pagetotal = data.data.total
                })
            },
            Eventclick(val) {
                if (val == "删除") {
                    this.deletes()
                }
            },
            rowclick(val, e) {
                if (e && e.no == 7) {

                } else {
                    this.show = true
                    this.header = val.order_no
                    this.getDetail(val.id)
                }
            },
            getDetail(id) {
                this.$ajax('get', '/api/orders/' + id, {}, (data) => {
                    this.rowData = data.data
                })
            },
            deletes() {
                this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        this.$ajax(
                            "delete", "/api/orders", {
                            id: this.chooseGroup
                        },
                            data => {
                                this.$message({
                                    type: "success",
                                    message: data.msg
                                });
                                this.$refs.tables.clearSelection();
                                this.chooseGroup = []
                                this.getData()
                            });
                    })
                    .catch(() => {
                        this.$message({
                            type: "info",
                            message: "已取消删除"
                        })
                    })
            },
            handleSelectionChange(val) {
                this.chooseGroup = []
                val.forEach(el => {
                    this.chooseGroup.push(el.id)
                })
            },
            handleCurrentChange(val) {
                this.page = val
                this.getData()
            }
        },
        //keepalive 执行部分刷新
        // activated() {
        //     this.getData(1)
        //     this.show = false
        // }
    }
</script>
<style scoped>
    .notPay {
        color: #ff9800;
    }

    .sendingOrder {
        color: #19c720;
    }

    .unsendOrder {
        font-size: 18px;
        padding: 10px 20px 10px 10px;
        color: #ff9800;
    }
    .waitSend{
        color:#ff667d;
    }
</style>